<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线程池管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.min.css"/>
    <style>

        .layui-table-cell {
            height: auto ;
            white-space: normal;
        }
        body .demo-class .layui-layer-title{background:#ffffff; color:#000000; border: none;}
        body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
        body .demo-class .layui-layer-btn0{
            border-color: #d2d2d2;
            background: 0 0;
            color: #666;
        }
        body .demo-class .layui-layer-btn1{
            border: 1px solid transparent;
            background: #1E9FFF;
            color: #ffffff;
        }
        .layui-layer-title{
            margin-bottom: 20px;
            border-bottom:1px solid #E9E7E7 !important;
        }
        .layui-form-item{
            margin-left: 60px;
        }
        .layui-table-cell{
            　　height: 100%;
            　　max-width: 100%;
            　　line-height:1.2;
        }

    </style>
</head>

<body>
<table id="threadPoolArgs" lay-filter="args"></table>
<form class="layui-form" id="editForm" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">应用名</label>
        <div class="layui-input-inline">
            <input type="text" id="e-an" name="appName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">线程池名</label>
        <div class="layui-input-inline">
            <input type="text" id="e-tpn" readonly name="threadPoolName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">核心线程数</label>
        <div class="layui-input-inline">
            <input type="text" id="e-cps" name="corePoolSize" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">最大线程数</label>
        <div class="layui-input-inline">
            <input type="text" id="e-mps" name="maxPoolSize" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">空闲存活时间</label>
        <div class="layui-input-inline">
            <input type="text" id="e-kas" name="keepAliveSeconds" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">队列类型</label>
        <div class="layui-input-inline">
            <input type="text" id="e-qt" readonly name="queueType" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">队列容量</label>
        <div class="layui-input-inline">
            <input type="text" id="e-qc" name="queueCapacity" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">容量告警</label>
        <div class="layui-input-inline">
            <input type="text" id="e-ct" name="capacityThreshold" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">活跃度告警</label>
        <div class="layui-input-inline">
            <input type="text" id="e-at" name="activeThreshold" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script>
    $=layui.jquery;
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        var timer;
        //第一个实例
        table.render({
            elem: '#threadPoolArgs'
            ,url: getRootPath_web()+"/threadpool/manager" //数据接口
            , page: {
                layout: ['refresh']
            }
            ,cols: [[ //表头
                 {field: 'appName', title: '应用名'}
                ,{field: 'threadPoolName', title: '线程池名', sort:true}
                ,{field: 'corePoolSize', title: '核心线程数', sort: true}
                ,{field: 'maxPoolSize', title: '最大线程数', sort:true}
                ,{field: 'keepAliveSeconds', title: '空闲存活时间', sort:true}
                ,{field: 'queueType', title: '队列类型'}
                ,{field: 'queueCapacity', title: '队列容量',sort: true}
                ,{field: 'threadFactoryType', title: "线程工厂类型"}
                ,{field: 'rejectHandlerType', title: '拒绝策略'}
                ,{field:'', title: '操作', toolbar:"#barDemo"}
            ]]
            ,id:"dataTable"
        });
        //工具条事件
        table.on('tool(args)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                var path='<div><table id='+data.threadPoolName+' lay-filter='+data.threadPoolName+'></table></div>';
                layer.open({
                    type: 1,
                    title: "实时数据",
                    maxmin: true,
                    content: path,
                    area:"500px",
                    success:function (layero,index) {
                        table.render({
                            elem: "#"+data.threadPoolName,
                            url:getRootPath_web()+"/threadpool/detail/"+data.threadPoolName,
                            page: {
                                layout: ['refresh']
                            },
                            loading:false,
                            parseData:function (result) {
                                var data=result.data;
                                var res=[];
                                for(var k in data){
                                    res.push({"key":k,"value":data[k]});
                                }
                                result.data=res;
                                return result;
                            },
                            cols:[[
                                 {field: 'key', title: '线程池属性'}
                                ,{field: 'value', title: '属性值', sort:true}
                            ]],
                            id:data.threadPoolName,
                            done:function (res,cur,count) {
                                setTimeout(function () {
                                    $("#layui-layer"+index).find(".layui-icon-refresh").click()
                                },1000)
                            }
                        });
                        $("#layui-layer"+index).css("top",0)
                    }
                })
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 1 //Page层类型
                    ,skin: 'demo-class'
                    ,title: ['修改线程池参数','font-size:18px']
                    ,btn: ['取消', '保存']
                    ,shadeClose: true
                    ,shade: [0.8, '#393D49']//遮罩透明度
                    ,area:['500px']
                    ,content:$("#editForm")  //弹窗路径
                    ,success : function(layero, index) {
                        $("#e-an").val(data.appName);
                        $("#e-tpn").val(data.threadPoolName);
                        $("#e-cps").val(data.corePoolSize);
                        $("#e-mps").val(data.maxPoolSize);
                        $("#e-kas").val(data.keepAliveSeconds);
                        $("#e-qt").val(data.queueType);
                        $("#e-qc").val(data.queueCapacity);
                        $("#e-ct").val(data.capacityThreshold);
                        $("#e-at").val(data.activeThreshold);
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn1').attr({
                            'lay-filter' : 'editConfig',
                            'lay-submit' : ''
                        })
                    },
                });
            }
        });

        //监听提交
        form.on('submit(editConfig)', function(data){
            $.ajax({
                url:getRootPath_web()+"/threadpool/manager",
                data:JSON.stringify(data.field),
                contentType: "application/json",
                type:"post",
                dataType:"json",
                success:function(result){
                    $(".layui-icon-refresh").click();
                }
            });
            return false;
        });
    });
    function getRootPath_web() {
        //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        var localhostPaht = curWwwPath.substring(0, pos);
        //获取带"/"的项目名，如：/uimcardprj
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName);
    }
</script>
</body>
</html>
